<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="600px"
            :before-close="closeDialog"
            append-to-body
            title="编辑用户"
    >

        <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="username" label="姓名">
                        <el-input size= "small" type="text" v-model="form.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="nickName" label="昵称">
                        <el-input size= "small"  type="text" v-model="form.nickName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item prop="userAccount" label="员工账号">
                        <el-input size= "small" type="text" v-model="form.userAccount"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="deptNo" label="部门">
                        <el-input size= "small"  type="text" v-model="form.deptNo"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

              <el-row>
                <el-col :span="12">
                    <el-form-item prop="position" label="员工岗位">
                        <el-input size= "small" type="text" v-model="form.position"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="mobile" label="手机">
                        <el-input size= "small"  type="text" v-model="form.mobile"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

             <el-row>
                <el-col :span="12">
                    <el-form-item prop="superAccount" label="直属上级">
                        <el-select v-model="form.superAccount" 
                                filterable
                                remote
                                reserve-keyword
                                :remote-method="querySuperAccounts" 
                                placeholder="请输入"
                                size= "small"
                                :loading="superAccount.loading">
                            <el-option
                            v-for="item in superAccount.options"
                            :key="item.userAccount"
                            :label="item.username"
                            :value="item.userAccount">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="email" label="邮箱">
                        <el-input size= "small"  type="text" v-model="form.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

              <el-row>
                <el-col :span="12">
                    <el-form-item prop="userType" label="员工类型">
                        <el-select v-model="form.userType" placeholder="请选择"  size= "small">
                            <el-option
                            v-for="item in userTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="status" label="状态">
                       <el-switch
                         size= "small"
                            v-model="form.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="内部"
                            inactive-text="外部">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
          <div class="btn-group">
            <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
            <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {getById,update,queryUserList} from '@/api/user'
    export default {
        data(){
            return {
                labelPosition:'right',
                dialogVisible: false,
                loading: false,
                //上级员工
                superAccount:{
                   options:[],
                   loading:false

                },
                //INTERNAL 内部员工|EXTERNAL 外部员工
                userTypeOptions:[
                    {
                        "value":"INTERNAL",
                        "label":"内部员工"
                    },{
                        "value":"EXTERNAL",
                        "label":"外部员工"
                    }
                ],
                form: {
                    id:"",
                    userId:"",
                    username:"",
                    nickName:"",
                    userAccount:"",
                    deptNo:"",
                    position:"",
                    mobile:"",
                    superAccount:"",
                    email:"",
                    userType:"",
                    status:true
                },
            }
        },
        methods:{
            async querySuperAccounts(query){
                if (query !== '') {
                    this.superAccount.loading = true;
                    let res = await queryUserList({key:query});
                    this.superAccount.options = res.data;
                    this.superAccount.loading = false;
                } else {
                  this.superAccount.options = [];
                }
            },
            async showDialog(row){
                let ret = await getById({id:row.id});
                let user = ret.data;
                this.dialogVisible = true;
                this.form = user;
                if(this.form.status === 'ON_JOB'){
                    this.form.status = true;
                }else{
                    this.form.status = false;
                }
                this.superAccount.options = [];
                if(user.superAccount !== ''){
                   this.superAccount.options = [{userAccount:user.superAccount,username:user.superUsername}];
                }
                this.superAccount.loading = false;
            },
            closeDialog(){
                this.form = {}
                this.dialogVisible = false
                this.loading = false
            },

            submit(){
                if(this.form.status){
                    this.form.status = "ON_JOB";
                }else{
                    this.form.status = "OUT_JOB";
                }
                this.$refs.form.validate(async valid => {
                    if(valid){
                        try{
                            this.loading = true
                            let res = await update(this.form);
                            if(res.status == '200'){
                                this.$message.success('保存成功')
                                this.closeDialog()
                                this.$emit('success')
                            }else{
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }catch{
                            this.loading = false
                        }
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: center;
        .el-button{
            width: 118px;
        }
    }
    .el-form-item{
        height: 60px;
    }
</style>